﻿@model List<DHQGHN.PM2.ViewModels.MappingDiaBanViewModel>
@{
    ViewBag.Title = "Chuyển đổi địa bàn dân số";
    ViewBag.Group = "Quản lý chung";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}
<link href="~/Content/standard_form_nhaplieu.css" rel="stylesheet" />
<link href="@Url.Content("~/Content/jquery-ui.1.10.2.css")" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<link href="~/Content/index.css" rel="stylesheet" />
@{
    var grid = new WebGrid(canPage: true, rowsPerPage: 10, selectionFieldName: "selectedRow");
    if (Model.Count == 0)
    {
        grid.Bind(@Model, autoSortAndPage: false, rowCount: 0);
    }
    else
    {
        grid.Bind(@Model, autoSortAndPage: false, rowCount: Model[0].RECODE_COUNT);
    }
    grid.Pager(WebGridPagerModes.NextPrevious);
}

<script>
    $(function () {
        @functions{
            public string GetAntiForgeryToken()
            {
                string cookieToken, formToken;
                AntiForgery.GetTokens(null, out cookieToken, out formToken);
                return cookieToken + "," + formToken;
            }
        }
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
        $(document).on('click', '#mapBtn', function () {
            var title = $(this).closest('tr').children('td:eq(2)').text().trim()
            $("#mapDialog").dialog({
                autoOpen: false
            });

            $.ajax({
                url: "@Url.Action("MappingArea_TK_DS", "MappingDiaBan")",
                dataType: "html",
                data: {
                    areaID: $(this).closest('tr').children('td:eq(1)').text().trim(),
                    areaName: $(this).closest('tr').children('td:eq(2)').text().trim()
                },
                success: function (html) {
                    var box = bootbox.dialog({
                        className: 'dialog-lg',
                        title: "Địa bàn thống kê: " + title,
                        message: html,
                        buttons: {
                            success: {
                                label: "<i class='fa fa-edit'></i> Cập nhật",
                                className: "btn btn-sm btn-success",
                                callback: function () {
                                    var areaListVal = null;
                                    areaListVal = [];

                                    $('input[name="notmapped"]:checked').each(function () {
                                        areaListVal.push($(this).attr('value'));
                                    });
                                    $('#AREA_DSKHHGD_ID').val(areaListVal);
                                    if (areaListVal.length == 0) {
                                        alert('Bạn cần chọn địa bàn để gán')
                                        return false;
                                    }
                                    else
                                        if (confirm('Bạn có chắc muốn cập nhật không?'))
                                            $('#MappingArea_DSForm').submit();
                                }
                            },
                            danger: {
                                label: "<i class='fa fa-reply'></i> Hủy bỏ",
                                className: "btn btn-sm btn-default",
                                callback: function () {

                                }
                            }
                        }
                    });
                }
            });

            return false;

            @*$('#mapDialog').load('@Url.Action("MappingArea_TK_DS", "MappingDiaBan")', {
                areaID: $(this).closest('tr').children('td:eq(0)').text().trim()
                 , areaName: $(this).closest('tr').children('td:eq(2)').text().trim()
            }, function (data) {
                $('#mapDialog').dialog({
                    autoOpen: false,
                    draggable: true,
                    modal: true,
                    title: "Chuyển đổi địa bàn dân số",
                    resizable: false,
                    maxheight: 500,
                    width: 1000,
                    my: "center",
                    at: "center",
                    of: window
                });
            });
            $('#mapDialog').dialog('open');
            return false;*@
        });
    });
</script>

<div class="page-bar">
    <ul class="page-breadcrumb" style="padding: 4px;">
        <li>
            <i class="fa fa-home"></i>
            <a href="#"> Chuyển đổi địa bàn dân số</a>
        </li>
    </ul>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="Cell lbl_row">

                @Html.Label("Khu hành chính:"
                     , new
                     {
                         @class = "text-center"
                                ,
                         placeholder = "Khu hành chính"
                                ,
                         style = "font-weight:100;"
                     })

            </div>
            <div class="Cell txt_row">
                @ViewBag.ADM_UNIT
            </div>
        </div>
        @*<div class="row">
                <div class="Cell lbl_row">
                    <h5>
                        @Html.Label("Địa bàn thống kê "
                         , new
                         {
                             @class = "text-center"
                                    ,
                             placeholder = "Địa bàn Thống kê"

                         })
                    </h5>
                </div>
                <div class="Cell txt_row">
                    @Html.DropDownListFor(model => model.AREA_ID, ViewBag.Area_TK as List<SelectListItem>, "Chọn địa bàn thống kê", new { style = " max-width:50%;", @class = "form-control input-sm" })
                </div>
            </div>*@
        <div id="gridContent" align="center">
            @if (Model.Count > 0)
            {
                if (Model.First().RECODE_COUNT <= 10)
                {
                    <script>
                        $(document).ready(function () {
                            $('.grid-footer').empty();
                            $('#MappingAreaGrid').append('<tfoot><tr class = "grid-footer"><td colspan="8"></td></tr></tfoot>')
                        })
                    </script>
                }
                <script>
                    $(document).ready(function () {
                        $('.grid-footer td').append('<div style="float:right;">Đang xem ' + '@Model.First().RowNumber' + ' - ' + '@Model.Last().RowNumber' + ' trên ' + '@Model.First().RECODE_COUNT' + ' địa bàn</div>')
                    })
                </script>
                @grid.GetHtml(tableStyle: "webGrid table table-striped table-bordered table-hover dataTable no-footer",
                    htmlAttributes: new { id = "MappingAreaGrid" },
                    headerStyle: "header",
                    alternatingRowStyle: "",
                    selectedRowStyle: "select",
                    rowStyle: "webgrid-row-style",
                    footerStyle: "grid-footer",
                    mode: WebGridPagerModes.All,
                    firstText: "|<<",
                    previousText: "|<",
                    nextText: ">|",
                    lastText: ">>|",
                    columns: grid.Columns(
                    grid.Column(
                        columnName: "STT",
                        header: "STT",
                        format: @<text>
                            <span id="spRowNum" class="display-mode">@item.RowNumber</span>
                        </text>,
                        canSort: false,
                        style: "clsSTT"
                    ),
                    grid.Column(columnName: "ID",
                        header: "ID",
                        format:  @<text>
                            <span id="spnAREA_ID" class="display-mode">@item.AREA_ID</span>
                        </text>,
                    canSort: false),
                    grid.Column("AREA_NAME", "Địa bàn thống kê", format:
                    @<text>
                        <span id="spnAreaName" class="display-mode">@item.AREA_NAME</span>
                    </text>,canSort: false, style: "clsAREA_NAME hidden-480"),

                    grid.Column("AREA_DSKHHGD_NAME", "Địa bàn Dân số KHHGD được gán", format:
                    @<text>
                        <span id="spnAreaName" class="display-mode">@item.AREA_DSKHHGD_NAME</span>
                    </text>,canSort: false, style: "clsAREA_NAME "),
                    grid.Column("Thao tác", format:
                    @<text>
                        <div style="text-align:center;">
                            <a id="mapBtn" style="cursor:pointer;" data-toggle="tooltip" title="Gán mới"><i class="fa fa-pencil"></i></a>
                        </div>
                    </text>, canSort: false, style: "clsAction")))
            }
            else
            {
                <h4>Không tìm thấy kết quả nào phù hợp</h4>
            }
        </div>
    </div>

    <br />
</div>

<div id="mapDialog" class="modal-dialog" align="center"></div>

<style>
    .ui-dialog {
        z-index: 3000;
    }

        .ui-dialog .ui-dialog-titlebar {
            color: white;
            background-color: #19A3A3;
        }

    #MappingAreaGrid td:nth-child(2), th:nth-child(2) {
        display: none;
    }

    #MappingAreaGrid tfoot tr:last-child td:first-child {
        text-align: left;
    }

    #MappingAreaGrid td:first-child {
        text-align: center;
    }

    div.pager {
        text-align: center;
        margin: 1em 0;
    }

        div.pager span {
            display: inline-block;
            width: 1.8em;
            height: 1.8em;
            line-height: 1.8;
            text-align: center;
            cursor: pointer;
            background: #66C2C2;
            color: white;
            margin-right: 0.5em;
        }

            div.pager span.active {
                background: white;
                color: #66C2C2;
            }
</style>
